<template>
    <textarea :id="tinymceId" style="visibility: hidden;" />
</template>

<script>
import {plugins, toolbar} from './config'
import _ from 'lodash'
import {ACCESS_TOKEN, ACCESS_TOKEN_NAME} from '../../api/request'
import loadTinymce from '../../utils/loadTinymce'

let num = 1

export default {
    name: 'FormTinymce',
    props: {
        id: {
            type: String,
            default: () => {
                num === 10000 && (num = 1)
                return `tinymce${+new Date()}${num++}`
            }
        },
        value: {
            default: ''
        },
        toolbar: []
    },
    data() {
        return {
            tinymceId: this.id
        }
    },
    mounted() {
        const token = localStorage.getItem(ACCESS_TOKEN)
        const tokenName = localStorage.getItem(ACCESS_TOKEN_NAME)
        const uploadUrl = `${process.env.VUE_APP_API_ROOT}/user/file/upload`
        // eslint-disable-next-line global-require
        let conf = {
            selector: `#${this.tinymceId}`,
            language: 'zh_CN',
            menubar: 'false',
            skin: 'oxide',
            skin_url: '/tinymce/skins/ui/tduck',
            content_css: '/tinymce/skins/content/tduck',
            cache_suffix: '?v=0.0.1',
            plugins,
            toolbar: this.toolbar ? this.toolbar : toolbar,
            toolbar_drawer: 'sliding',
            toolbar_mode: 'sliding',
            height: 200,
            // fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt",
            branding: false,
            object_resizing: false,
            end_container_on_empty_block: true,
            powerpaste_word_import: 'clean',
            code_dialog_height: 450,
            code_dialog_width: 1000,
            advlist_bullet_styles: 'square',
            advlist_number_styles: 'default',
            default_link_target: '_blank',
            link_title: false,
            statusbar: false,
            content_style: 'img {max-width:100%;}',
            nonbreaking_force_tab: true,
            images_upload_handler(blobInfo, succFun, failFun) {
                const file = blobInfo.blob()// 转化为易于理解的file对象
                const xhr = new XMLHttpRequest()
                xhr.withCredentials = false
                xhr.open('POST', uploadUrl)
                xhr.setRequestHeader(`${tokenName}`, `${token}`)
                xhr.onload = function() {
                    if (xhr.status !== 200) {
                        failFun(`HTTP Error: ${xhr.status}`)
                        return
                    }
                    const json = JSON.parse(xhr.responseText)
                    if (!json || typeof json.data !== 'string') {
                        failFun(`Invalid JSON: ${xhr.responseText}`)
                        return
                    }
                    succFun(json.data)
                }
                const formData = new FormData()
                formData.append('file', file, file.name)// 此处与源文档不一样
                xhr.send(formData)
            }
        }
        loadTinymce(tinymce => {
            require('./zh_CN')
            conf = Object.assign(conf, this.$attrs)
            conf.init_instance_callback = editor => {
                if (this.value) editor.setContent(this.value)
                this.vModel(editor)
            }
            tinymce.init(conf)
        })
    },
    destroyed() {
        this.destroyTinymce()
    },
    methods: {
        vModel(editor) {
            // 控制连续写入时setContent的触发频率
            this.$watch('value', (val, prevVal) => {
                if (editor && val !== prevVal && val !== editor.getContent()) {
                    if (typeof val !== 'string') val = val.toString()
                    _.debounce(editor.setContent, 250, val)
                }
            })

            editor.on('change keyup undo redo', () => {
                this.$emit('input', editor.getContent())
            })
            editor.on('blur', () => {
                this.$emit('blur')
            })
        },
        destroyTinymce() {
            if (!window.tinymce) return
            const tinymceInstance = window.tinymce.get(this.tinymceId)
            if (tinymceInstance) {
                tinymceInstance.destroy()
            }
        }
    }
}
</script>
<style>
/* 在el-dialog中tinymce z-index 被太小而被遮挡时要加这两句 */
.tox-tinymce-aux {
  z-index: 99999 !important;
}

.tinymce.ui.FloatPanel {
  z-Index: 99;
}
</style>
